<template>
  <div>
    列表页
    <div>
      <ul>
        <!-- <li class="active">水果</li>
        <li>海鲜</li>
        <li>衣服</li>-->
        <!-- 当你给组件帮不上事件的时候，就记得加 修饰符 .native -->
        <router-link
          v-for="item in onetype"
          :key="item.id"
          tag="li"
          :to="item.path"
          active-class="active"
          @click.native="getdata(item)"
        >{{ item.name }}</router-link>
      </ul>
      <div id="content">
        <!-- 设置二级路由的出口 -->
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      onetype: [
        {
          id: 1,
          path: "/list/fruits",
          name: "水果"
        },
        {
          id: 2,
          path: "/list/seafood",
          name: "海鲜"
        },
        {
          id: 3,
          path: "/list/clothing",
          name: "衣服"
        }
      ]
    };
  },

  components: {},

  methods: {
    getdata(obj) {
      console.log(obj, 789);
      localStorage.setItem("type", obj.name);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../assets/sass/list.scss";
</style>
